<script setup lang="ts">
import { getOrderListAPI } from '@/api/order'
import { orderListType, responseOrderListType, resOrderList } from '@/api/order/type'
import { reactive, ref, onMounted } from 'vue'

// 用户订单列表
const orderData = ref({} as orderListType)
// 总数据数
const total = ref(0)
// 当前页
const page = ref(1)
// 每页数据数
const limit = ref(10)
// 就诊人名称
const patientName = ref('')
// 订单状态
const status = ref('')
// 请求参数
const queryInfo = reactive<resOrderList>({})

/** 获取订单列表 */
const getOrderList = async () => {
  const { data: res }: responseOrderListType = await getOrderListAPI(page.value, limit.value, queryInfo)
  if (res.code !== 200) return ElMessage.error(res.message)
  orderData.value = res.data
  total.value = res.data.total
}

import { storeToRefs } from 'pinia'
// 获取订单状态方法仓库
import { useOrderStore } from '@/store/modules/orderStore'
const orderStore = useOrderStore()
const { orderStatus } = storeToRefs(orderStore)

// 获取就诊人列表方法仓库
import { useClientStore } from '@/store/modules/clientStore'
const clientStore = useClientStore()
const { ofPatientList } = storeToRefs(clientStore)

onMounted(() => {
  getOrderList()
  // 获取就诊人列表
  clientStore.toObtainListOfPatient()
  // 获取订单状态
  orderStore.toGetOrderStatus()
})

import { useRouter } from 'vue-router'
const router = useRouter()
// 前往订单详情页
const gotoOrder_detail = (id: number) => {
  router.push({
    path: '/user/order',
    query: {
      id,
    },
  })
}

/** 点击就诊人 */
const ofPatientChange = (val: string) => {
  queryInfo.patientName = val
  getOrderList()
}
/** 清空就诊人 */
const ofPatientClear = () => {
  patientName.value = ''
  if (queryInfo.patientName) {
    delete queryInfo.patientName
    getOrderList()
  }
}

/** 点击订单状态 */
const statusChange = (val: string) => {
  queryInfo.orderStatus = val
  getOrderList()
}
/** 清空订单状态 */
const statusClear = () => {
  status.value = ''
  if (queryInfo.orderStatus) {
    delete queryInfo.orderStatus
    getOrderList()
  }
}

/** page-size 改变时触发 */
const handleSizeChange = (val: number) => {
  limit.value = val
  getOrderList()
}
/** current-page 改变时触发 */
const handleCurrentChange = (val: number) => {
  page.value = val
  getOrderList()
}
</script>

<template>
  <el-card shadow="always">
    <template #header>
      <div>
        <span>挂号订单</span>
      </div>
    </template>
    <!-- 选择器 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-select placeholder="请选择就诊人" clearable @change="ofPatientChange" v-model="patientName" @clear="ofPatientClear">
          <el-option :label="item.name" :value="item.name" v-for="item in ofPatientList" :key="item.id" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select placeholder="请选择订单状态" clearable @change="statusChange" v-model="status" @clear="statusClear">
          <el-option :label="item.comment" :value="item.status" v-for="(item, index) in orderStatus" :key="index" />
        </el-select>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table :data="orderData.records" border stripe style="width: 100%; margin: 20px 0">
      <el-table-column prop="fetchTime" label="就诊时间" width="160px" />
      <el-table-column prop="hosname" label="医院" />
      <el-table-column prop="depname" label="科室" width="160px" />
      <el-table-column prop="title" label="医生" />
      <el-table-column prop="amount" label="医事服务费" width="100px"></el-table-column>
      <el-table-column prop="patientName" label="就诊人"></el-table-column>
      <el-table-column label="订单状态" width="140px">
        <template #default="scope">
          <span>{{ scope.row.param?.orderStatusString }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="50px">
        <template #default="scope">
          <span style="color: #00a6ed; cursor: pointer" @click="gotoOrder_detail(scope.row.id)">详情</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      :page-sizes="[5, 10, 15, 20]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<style scoped></style>
